@import '../common/index.less';

@switch-checked-color: var(--td-switch-checked-color, @brand-color);
@switch-checked-disabled-color: var(--td-switch-checked-disabled-color, @brand-color-disabled);
@switch-unchecked-color: var(--td-switch-unchecked-color, @bg-color-secondarycontainer-active);
@switch-unchecked-disabled-color: var(--td-switch-unchecked-disabled-color, @bg-color-component-disabled);

@switch-width: var(--td-switch-width, 90rpx);
@switch-height: var(--td-switch-height, 56rpx);
@switch-radius: var(--td-switch-radius, calc(@switch-height / 2));

// large
@switch-large-width: var(--td-switch-large-width, 104rpx);
@switch-large-height: var(--td-switch-large-height, 64rpx);
@switch-large-radius: var(--td-switch-large-radius, calc(@switch-large-height / 2));

// small
@switch-small-width: var(--td-switch-small-width, 78rpx);
@switch-small-height: var(--td-switch-small-height, 48rpx);
@switch-small-radius: var(--td-switch-small-radius, calc(@switch-small-height / 2));

@switch-dot-size: var(--td-switch-dot-size, 44rpx);
@switch-dot-plain-size: var(--td-switch-dot-plain-size, 36rpx);
@switch-dot-horizontal-margin: var(--td-switch-dot-horizontal-margin, 6rpx);
@switch-dot-plain-horizontal-margin: var(--td-switch-dot-plain-horizontal-margin, 10rpx);
@switch-dot-shadow: var(--td-switch-dot-shadow, @shadow-1);
@switch-dot-border-color: var(--td-switch-dot-border-color, @gray-color-4);

// large dot
@switch-dot-large-size: var(--td-switch-dot-large-size, 52rpx);
@switch-dot-plain-large-size: var(--td-switch-dot-plain-large-size, 44rpx);

// small dot
@switch-dot-small-size: var(--td-switch-dot-small-size, 36rpx);
@switch-dot-plain-small-size: var(--td-switch-dot-plain-small-size, 28rpx);

@switch-label-font-size: var(--td-switch-label-font-size, 28rpx);
@switch-label-large-font-size: var(--td-switch-label-large-font-size, 32rpx);
@switch-label-small-font-size: var(--td-switch-label-small-font-size, 24rpx);

@switch-label-color: var(--td-switch-label-color, @text-color-disabled);
@switch-label-checked-color: var(--td-switch-label-checked-color, @switch-checked-color);

// icon
@switch-icon-size: var(--td-switch-icon-size, 40rpx);
@switch-icon-large-size: var(--td-switch-icon-large-size, 48rpx);
@switch-icon-small-size: var(--td-switch-icon-small-size, 32rpx);

.@{prefix}-switch {
  display: flex;
  align-items: center;
  overflow: hidden;

  &__label {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    font-size: @switch-label-font-size;
    color: @switch-label-color;
    overflow: hidden;

    &--checked {
      color: @switch-label-checked-color;
    }

    &--disabled {
      color: @switch-unchecked-disabled-color;
    }

    &--checked&--disabled {
      color: @switch-checked-disabled-color;
    }

    &--large {
      font-size: @switch-label-large-font-size;
    }

    &--small {
      font-size: @switch-label-small-font-size;
    }

    &:empty {
      display: none;
    }
  }

  &__icon {
    font-size: @switch-icon-size;

    &--large {
      font-size: @switch-icon-large-size;
    }

    &--small {
      font-size: @switch-icon-small-size;
    }
  }

  &__loading {
    color: @switch-label-checked-color;
  }

  &__body {
    vertical-align: middle;
    width: @switch-width;
    height: @switch-height;
    border-radius: @switch-radius;
    background-color: @switch-unchecked-color;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;

    &--checked {
      background-color: @switch-checked-color;
    }

    &--disabled {
      background-color: @switch-unchecked-disabled-color;
    }

    &--checked&--disabled {
      background-color: @switch-checked-disabled-color;
    }

    &--large {
      width: @switch-large-width;
      height: @switch-large-height;
      border-radius: @switch-large-radius;
    }

    &--small {
      width: @switch-small-width;
      height: @switch-small-height;
      border-radius: @switch-small-radius;
    }
  }

  &__dot {
    position: absolute;
    left: @switch-dot-horizontal-margin;
    top: 50%;
    width: @switch-dot-size;
    height: @switch-dot-size;
    border-radius: 50%;
    background-color: @font-white-1;
    transition: all 0.3s;
    transform: translateY(-50%);
    box-shadow: @switch-dot-shadow;

    &:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      border: 1px solid @switch-dot-border-color;
      border-radius: 50%;
      transform: scale(0.5);
      transform-origin: 0 0;
      box-sizing: border-box;
    }

    &--large {
      width: @switch-dot-large-size;
      height: @switch-dot-large-size;
    }

    &--small {
      width: @switch-dot-small-size;
      height: @switch-dot-small-size;
    }

    &--checked {
      left: calc(@switch-width - @switch-dot-size - @switch-dot-horizontal-margin);
    }

    &--large&--checked {
      left: calc(@switch-large-width - @switch-dot-large-size - @switch-dot-horizontal-margin);
    }

    &--small&--checked {
      left: calc(@switch-small-width - @switch-dot-small-size - @switch-dot-horizontal-margin);
    }

    &--plain:not(&--checked) {
      width: @switch-dot-plain-size;
      height: @switch-dot-plain-size;
      left: @switch-dot-plain-horizontal-margin;
    }

    &--large&--plain:not(&--checked) {
      width: @switch-dot-plain-large-size;
      height: @switch-dot-plain-large-size;
    }

    &--small&--plain:not(&--checked) {
      width: @switch-dot-plain-small-size;
      height: @switch-dot-plain-small-size;
    }
  }
}
